<!--
 * @Author: ray ray.chin@163.com
 * @Date: 2022-01-14 13:36:46
 * @LastEditors: ray ray.chin@163.com
 * @LastEditTime: 2024-06-24 14:38:25
 * @FilePath: /app-template-uni-upgrade/src/pagesRayTemplate/pages/index/index.vue
 * @Description: 模板项目导航页
 * Copyright (c) 2023 by ray ray.chin@163.com, All Rights Reserved.
-->
<template>
    <!-- :class="[{'main-padding': (!showTimestampTips && !loading)}]" -->
    <view class="main"
    >
        <view class="toolbar-left"
            @tap.stop="closeApp()"
            v-show="false"
        >
            <image class="toolbar-left-icon"
                src="/static/imgs/icon/home_back.png"
            ></image>
        </view>

        <scroll-view class="tab-scroll-sticky"
            id="tabs"
            scroll-y="true"
            @scroll="tabScoll"
            :scroll-top="scrollInto" >
            <view id="scrollTop">
                <uni-swiper-dot
                    :info="swiperData"
                    :current="swiperCurrent"
                    field="content"
                    :mode="swiperMode"
                >
                    <swiper class="swiper-box"
                        @change="swiperChange"
                    >
                        <swiper-item
                            v-for="(item, index) in swiperData"
                            :key="`dot${index}`"
                        >
                            <view class="swiper-item">
                                <image :src="item.imgUrl"
                                    class="swiper-item-img" />
                            </view>
                        </swiper-item>
                    </swiper>
                </uni-swiper-dot>
            </view>
            <view class="scroll-content">
                <view class="scroll-tab"
                    :class="[barShow ? 'scroll-tab-fixed' : 'scroll-tab-static']"
                    :style="{top: barShow ? fixedTop + 'px' : '0'}"
                >
                    <view class="scroll-tab-list"
                        v-for="(item, index) in tabList"
                        :style="{color:activeTab == index ? activeColor : '#333333'}"
                        @click="changeTab(index)"
                        :id="`tabs${index}`"
                        :key="`tab${index}`"
                    >
                        <text class="scroll-tab-list-text">{{ item.text }}</text>
                    </view>
                    <view class="scroll-tab-bar" :style="[tabBarStyle]"></view>
                </view>
            </view>
            <view class="scroll-warp" >
                <view
                    class="scroll-warp-list"
                    :id="`wrap${index}`"
                    v-for="(item, index) in tabList"
                    :key="`wrap${index}`"
                >
                    面板内容{{ index }}
                </view>

                <view class="temp-warp-list">
                    <!-- https://en.uniapp.dcloud.io/uni-app-x/component/button.html -->
                    <button
                        size="default"
                        type="primary"
                        @click="navigateToUrl('/pagesRayTemplate/pages/form/index')"
                    >
                        to ray form
                    </button>
                </view>
            </view>
        </scroll-view>

        <ray-tab :current="'0'" />
    </view>
</template>

<script>
import { uSwiperDot } from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
export default {
    components: {
        uSwiperDot,
    },
    data() {
        return {
            // 轮播图相关
            swiperData: [
                {
                    content: '内容 A',
                    imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
                }, {
                    content: '内容 B',
                    imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
                }, {
                    content: '内容 C',
                    imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
                }
            ],
            swiperCurrent: 0,
            swiperMode: 'round',

            // 底部导航相关
            id: 1,
			barShow: false,
			tabTop: 0,
			activeTab: 0,
			scrollInto: 0,
			tabBarStyle: {},
			warpTop: [],
			scrollWarp: [],
			tabList: [
                {
					text: "tab1",
					navTarget: "第一列",
				},
                {
					text: "tab2",
					navTarget: "第二列",
				},
                {
					text: "tab3",
					navTarget: "第三列",
				},
                {
					text: "tab4",
					navTarget: "第四列",
				}
			],
			fixedTop: 44,
			activeColor: "red",
        };
    },
    computed: {
		/**
		 * userid
		 */
		userId() {
			if (!this.$route.query.userId) {
				return "";
			}
			return this.$route.query.userId;
		},
    },
    onLoad() {
        this.$nextTick(async function () {
			let rect = await this.GetRect("#scrollTop");
			this.tabTop = rect.height;
			this._getTabRect(0);
			this.barInit();
		});
    },
    onShow() {
        uni.$emit("updateRayBadgeText", {index: "0", badgeText: "100"});
    },
    mounted() {
        document.querySelector('.uni-page-head-hd').style.display = 'none'
    },
    async created() {
        let __this = this;
    },
    watch: {
    },
    methods: {
        navigateToUrl (url) {  
            if (!url) {
                return;
            }
            uni.navigateTo({
                url: url,
            });
        },
        closeApp () {},
        // 轮播图方法start
        swiperChange (e) {
            this.swiperCurrent = e.detail.current;

        },
        // 轮播图方法end

        // 顶部导航方法start
        // 获取节点信息
		GetRect (selector) {
			return new Promise((resolve, reject)=>{
				let view = uni.createSelectorQuery().in(this);
				view.select(selector).boundingClientRect(rect => {
					resolve(rect)
				}).exec();
			});
		},
		// tab切换
		changeTab (e) {
			this.activeTab = e;
			this._getTabRect(this.activeTab);
			if (e == 0) {
				this.scrollInto = this.warpTop[e] - 44;
			} else {
				this.scrollInto = this.warpTop[e] - 88;
			}
		},
		// 获取tab宽度
		async _getTabRect (itemIndex) {
			let rect = await this.GetRect("#tabs" + itemIndex);
			let rect1 = await this.GetRect("#tabs" + itemIndex + ">.scroll-tab-list-text");
			let width = (rect1.width * 0.67);
			this.tabBarStyle = {
				left: (rect.left + (rect.width - width) / 2) + 'px',
				width: width + 'px',
				background: this.activeColor
			}
		},
		// scroll滚动
		async tabScoll (e) {
			let scrollTop = e.detail.scrollTop;
			let rect = await this.GetRect("#scrollTop");
			if( this.tabTop == 0) {
				let rect = await this.GetRect("#scrollTop");
				this.tabTop = rect.height;
			}
			this.barShow = scrollTop >= this.tabTop ? true : false;
			let scrollTop1 = scrollTop;
			if (scrollTop1 <= (this.warpTop[1] - 93)) {
				this.activeTab = 0;
				this._getTabRect(0);
			}
			if (
                (scrollTop1 > (this.warpTop[1] - 93))
                && (scrollTop1 < (this.warpTop[2] - 93))
            ) {
				this.activeTab = 1;
				this._getTabRect(1);
			}
			if (
                (scrollTop1 > (this.warpTop[2] - 93))
                && (scrollTop1 < (this.warpTop[3] - 93))
            ) {
				this.activeTab = 2;
				this._getTabRect(2);
			}
			if (scrollTop1 > (this.warpTop[3] - 93)) {
				this.activeTab =3;
				this._getTabRect(3);
			}
		},
		// 获取节点距离顶部距离
		barInit:async function (index) {
			let navTargetTop = [];
			let navTargetTop1 = [];
            // 顶部栏高度+tab高度+兼容值
			let randoms = 93;
			for (let i = 0 ; i < this.tabList.length ; i ++) {
				this.GetRect("#wrap"+i).then(res => {
					navTargetTop.push(parseInt(res.top))
					navTargetTop1.push(parseInt(res.top)+randoms)
				});
			}
			this.warpTop = navTargetTop;
			this.scrollWarp = navTargetTop1;
		},
        // 顶部导航方法end
    },
};
</script>

<style lang="scss" scoped >
uni-page-body {
    width: 100vw;
    overflow: hidden;
    background: #fff;
}

.main-padding {
    padding-bottom: 100rpx;
}
.main {
    height: 100%;
    width: 100%;

    .toolbar-left {
        position: fixed;
        top: 15rpx;
        left: 15rpx;
        z-index: 998;
        font-size: 30rpx;
        color: #000;

        .toolbar-left-icon {
            width: 60rpx;
            height: 60rpx;
        }
    }

    .swiper-item {
        position: relative;
        height: 100%;
        .swiper-item-img {
            width: 100%;
            height: 100%;
        }
    }

    // 顶部导航样式start
    .flexRowCc {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.scroll-content {
		position: relative;
		.scroll-tab {
			@extend .flexRowCc;
			justify-content: space-between;
			width: 100%;
			height: 44px;
			box-sizing: border-box;
			border-top: 1px solid #F1F1F1;
			border-bottom: 1px solid #F1F1F1;
			background: #FFFFFF;
			position: relative;
			z-index: 999;
			&-static {
				position: relative !important;
			}
			&-fixed {
				position: fixed;
				top: 44px;
				left: 0;
			}
			&-list {
				text-align: center;
				font-size: 32rpx;
				flex: 1 1 auto;
				&-text {
					display: inline-block;
				}
			}
			&-bar {
				width: 64rpx;
				height: 4rpx;
				background: rgba(222, 37, 37, 100);
				position: absolute;
				bottom: 8rpx;
				border-radius: 16rpx;
				transition-duration:.5s;
			}
		}
	}
	.scroll-warp{
		height: 100vh;
	}
    // 顶部导航样式end

    .temp-warp-list {
        display: grid;
        grid-template-columns: auto-fit minmax(50%, 95%);
        // 行间距是 10px，列间距是 20px
        gap: 10px 20px;
    }
}
</style>